<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:composition template="layout.xhtml">

        <ui:define name="title">
            #{ managerCriarEmolumento.emolumento.id == null ? 'Cadastrar Emolumento' : 'Editar Emolumento' }
        </ui:define>




        <ui:define name="content">
            <h:form id="criarEmolumentoForm">           
                <p:messages id="criarEmolumentoMessages" autoUpdate="true" />

                <div class="actions">
                    <div id="buttons">
                        <p:button value="Pesquisar Emolumento" outcome="pesquisarEmolumento.xhtml"
                                  rendered="#{ managerCriarEmolumento.emolumento.id == null }"
                                  icon="ui-icon-search" styleClass="ui-priority-primary">
                        </p:button>
                    </div>
                </div>

                <p:fieldset legend="Dados do Emolumento" id="cadastrarDadosPanel">
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Descrição" for="descricaoInputTextarea" />
                        </div>
                        <div class="column8">
                            <p:inputTextarea id="descricaoInputTextarea"
                                             value="#{ managerCriarEmolumento.emolumento.descricao }" required="true"
                                             requiredMessage="Descrição é obrigatório"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Data de Vigor" for="dataVigorCalendar" />
                        </div>
                        <div class="column3">
                            <p:calendar id="dataVigorCalendar" value="#{ managerCriarEmolumento.emolumento.dataVigor }"
                                        showOn="button" pattern="dd/MM/yyyy" locale="pt" navigator="true" required="true"
                                        requiredMessage="Data de Vigor é obrigatório" />
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Valor do Selo" for="valorSeloInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="valorSeloInputText"
                                         value="#{ managerCriarEmolumento.emolumento.valorSelo }" required="true"
                                         requiredMessage="Valor do Selo é obrigatório"
                                         onkeypress="jQuery(this).autoNumeric({aSign:'R$ ', aSep: '.', aDec: ','} );">
                                <f:convertNumber type="currency" locale="pt-BR" />
                            </p:inputText>
                        </div>
                    </div>
                </p:fieldset>

                <p:fieldset legend="Itens do Emolumento" id="cadastrarItensPanel">
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Ato" for="itemAtoItemInputText" />
                        </div>
                        <div class="column8">
                            <p:inputText id="itemAtoItemInputText"
                                         value="#{ managerCriarEmolumento.emolumentoItem.atoItem.descricao }"
                                         required="true" requiredMessage="Ato é obrigatório">

                                <script type="text/javascript">
                                    $(document).ready(function(){
                                        $('#criarEmolumentoForm\\:itemAtoItemInputText').attr('readonly', 'readonly');
                                    });
                                </script>
                            </p:inputText>
                        </div> 
                        <p:commandButton styleClass="icon-plus" icon="ui-icon-plus" onclick="dialogAto.show();" process="@this" update="@this" immediate="true" />
                    </div>
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Valor do Cartório" for="valorCartorioItemInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="valorCartorioItemInputText" value="#{ managerCriarEmolumento.emolumentoItem.valorCartorio }"
                                         required="true" requiredMessage="Valor do Cartório é obrigatório"
                                         onkeypress="jQuery(this).autoNumeric({aSign:'R$ ', aSep: '.', aDec: ','} );">
                                <f:convertNumber type="currency" locale="pt-BR" />
                            </p:inputText>                            
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Valor do FERMOJUPI" for="valorCartorioItemInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="valorFermojupiItemInputText" value="#{ managerCriarEmolumento.emolumentoItem.valorFermojupi }"
                                         required="true" requiredMessage="Valor do FERMOJUPI é obrigatório"
                                         onkeypress="jQuery(this).autoNumeric({aSign:'R$ ', aSep: '.', aDec: ','} );">
                                <f:convertNumber type="currency" locale="pt-BR" />
                            </p:inputText>
                        </div>
                    </div>
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Valor Total" for="valorCartorioItemInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="valorTotalItemInputText" value="#{ managerCriarEmolumento.emolumentoItem.valorTotal }"
                                         required="true" requiredMessage="Valor Total é obrigatório"
                                         onkeypress="jQuery(this).autoNumeric({aSign:'R$ ', aSep: '.', aDec: ','} );">
                                <f:convertNumber type="currency" locale="pt-BR" />
                            </p:inputText>
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Valor Inicial" for="valorInicialItemInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="valorInicialItemInputText" value="#{ managerCriarEmolumento.emolumentoItem.valorInicial }"
                                         onkeypress="jQuery(this).autoNumeric({aSign:'R$ ', aSep: '.', aDec: ','} );">
                                <f:convertNumber type="currency" locale="pt-BR" />
                            </p:inputText>
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Valor Final" for="valorFinalItemInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="valorFinalItemInputText" value="#{ managerCriarEmolumento.emolumentoItem.valorFinal }"
                                         onkeypress="jQuery(this).autoNumeric({aSign:'R$ ', aSep: '.', aDec: ','} );">
                                <f:convertNumber type="currency" locale="pt-BR" />
                            </p:inputText>
                        </div>
                    </div>
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="OAB" for="valorFinalItemInputText" />                        
                        </div>
                        <div class="column1">
                            <p:selectBooleanButton id="itemOabSelectBooleanButton" value="#{ managerCriarEmolumento.emolumentoItem.oab }" onLabel="Sim" offLabel="Não" />
                        </div>
                    </div>

                    <div class="command">
                        <p:commandButton  value="Adicionar" actionListener="#{ managerCriarEmolumento.adicionarItem() }"
                                          update=":criarEmolumentoForm:cadastrarItensPanel"
                                          process=":criarEmolumentoForm:cadastrarItensPanel" icon="ui-icon-plus" />
                        <p:commandButton  value="Limpar" icon="ui-icon-close" update=":criarEmolumentoForm:cadastrarItensPanel"
                                          actionListener="#{ managerCriarEmolumento.limpar() }" process="@this" />
                    </div>

                    <p:dataTable id="itensDataTable" var="item" value="#{ managerCriarEmolumento.emolumentoItens }"
                                 rows="5" paginator="true" paginatorPosition="bottom" emptyMessage="Nenhum item adicionado" >

                        <p:column headerText="Opções" width="5%">
                            <div class="options2">
                                <p:commandButton icon="ui-icon-pencil" actionListener="#{ managerCriarEmolumento.editarItem(item) }"
                                                 process="@this" update=":criarEmolumentoForm:cadastrarItensPanel" />
                                <p:commandButton icon="ui-icon-trash" actionListener="#{ managerCriarEmolumento.removerItem(item) }"
                                                 process="@this" update="itensDataTable" />
                            </div>
                        </p:column>
                        <p:column headerText="Ato" width="50%">
                            <h:outputText value="#{ item.atoItem.codigo } - #{ item.atoItem.descricao }" />
                        </p:column>
                        <p:column headerText="Valor do Cartório" width="15%">
                            <h:outputText value="#{ item.valorCartorio }">
                                <f:convertNumber type="currency" locale="pt-BR" />
                            </h:outputText>
                        </p:column>
                        <p:column headerText="Valor do FERMOJUPI" width="15%">
                            <h:outputText value="#{ item.valorFermojupi }">
                                <f:convertNumber type="currency" locale="pt-BR" />
                            </h:outputText>
                        </p:column>
                        <p:column headerText="Valor total">
                            <h:outputText value="#{ item.valorTotal }" width="15%">
                                <f:convertNumber type="currency" locale="pt-BR" />
                            </h:outputText>
                        </p:column>
                    </p:dataTable>
                </p:fieldset>

                <div class="command">
                    <p:commandButton  value="Salvar" actionListener="#{ managerCriarEmolumento.salvar() }"
                                      oncomplete="widthFix();"
                                      update=":criarEmolumentoForm:cadastrarDadosPanel, :criarEmolumentoForm:itensDataTable"
                                      process="@this, :criarEmolumentoForm:cadastrarDadosPanel, :criarEmolumentoForm:itensDataTable"
                                      styleClass="ui-priority-primary"
                                      icon="ui-icon-disk"  onsuccess="goY(0);"/>
                    <p:button value="Cancelar" icon="ui-icon-cancel" href="pesquisarEmolumento.xhtml" />
                </div>

                <p:dialog id="AtoDialog" widgetVar="dialogAto" header="Ato" dynamic="true" modal="true" appendToBody="false"
                          resizable="false" width="90%" height="450px" draggable="false" closable="false">
                    <p:messages id="tipoSeloMessages" autoUpdate="true" />

                    <p:fieldset id="atoPesquisarFieldset" styleClass="column12" legend="Filtros">
                        <f:validateBean disabled="true">
                            <div class="row">
                                <div class="column2">
                                    <p:outputLabel value="Código" for="atoPesquisarCodigoInputText" />
                                </div>
                                <div class="column3">
                                    <p:inputText id="atoPesquisarCodigoInputText" value="#{ managerCriarEmolumento.atoPesquisar.codigo }" />
                                </div>
                                <div class="column2">
                                    <p:outputLabel value="Descrição" for="atoPesquisarDescricaoInputText" />
                                </div>
                                <div class="column4">
                                    <p:inputText id="atoPesquisarDescricaoInputText" value="#{ managerCriarEmolumento.atoPesquisar.descricao }" />
                                </div>
                            </div>
                        </f:validateBean>
                    </p:fieldset>

                    <div class="command">
                        <p:commandButton actionListener="#{ managerCriarEmolumento.pesquisarAtos() }" value="Pesquisar"
                                         update=":criarEmolumentoForm:atoPesquisarFieldset, :criarEmolumentoForm:atoDataTable" process="@this, :criarEmolumentoForm:atoPesquisarFieldset"
                                         icon="ui-icon-search" />
                    </div>

                    <p:dataTable id="atoDataTable" var="ato" value="#{ managerCriarEmolumento.atos }" styleClass="column12"
                                 rows="5" paginator="true" paginatorPosition="bottom" rowKey="#{ ato }"
                                 emptyMessage="Nenhum ato encontrado" selection="#{ managerCriarEmolumento.atoSelecionado }"
                                 selectionMode="single">
                        <p:ajax event="rowSelect"  process="@this" update="@this"/>

                        <p:column headerText="Código" width="20%">
                            <h:outputText value="#{ ato.codigo }" />
                        </p:column>
                        <p:column headerText="Descrição" width="80%">
                            <h:outputText value="#{ ato.descricao }" />
                        </p:column>
                    </p:dataTable>

                    <div class="command">
                        <p:commandButton actionListener="#{ managerCriarEmolumento.selecionarAto() }"
                                         styleClass="ui-priority-primary"
                                         update=":criarEmolumentoForm:itemAtoItemInputText, :criarEmolumentoForm:AtoDialog" process="@this"
                                         value="Selecionar" icon="ui-icon-plus" oncomplete="dialogAto.hide();" />
                        <p:commandButton value="Cancelar" actionListener="#{ managerCriarEmolumento.cancelar() }" icon="ui-icon-close" onclick="dialogAto.hide()" 
                                         process="@this" update=":criarEmolumentoForm:AtoDialog" />                            
                    </div>

                </p:dialog>

            </h:form>
        </ui:define>
    </ui:composition>

</html>